<template>
	<view class="content">
		<!-- <uni-notice-bar 
			@getmore="getMore" 
			more-text="查看" 
			background-color="#fff"
			single="true"
			show-icon="true"
			color="#0190a0"
			text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"
			>
		</uni-notice-bar> -->
		<remind :todoCount="todoCount" :todoList="todoList"></remind>
		<view class="grid">
			<view class="grid-title">
				常用功能
			</view>
			<view class="item">
				<view 
				hover-start-time="30"
				hover-stay-time="80"
				hover-class="commonly-hover" 
				class="item-card" 
				v-for="(item ,index) in gridList" 
				:key="index"
				@tap="handleGridClick(index)">
					<view class="item-card-top">
						<image class="item-image" :src="item.image"></image>
					</view>
					<text class="uni-text">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
	import remind from "./components/remind.vue"
	import {apiUserInfo,apitodo} from '@/common/api.js'
	export default {
		name:"index",
		components:{
			remind,
			uniNoticeBar
		},
		data() {
			return {
				gridList:[
					{image:'/static/image/user-manage.png',text:'请假记录'},
					{image:'/static/image/card@128.png',text:'补卡申请'},
					{image:'/static/image/qp@128.png',text:'签批申请'},
					{image:'/static/image/ht@128.png',text:'合同内容'},
					{image:'/static/image/gw@128.png',text:'公文内容'},
					{image:'/static/image/jb@128.png',text:'进度申请'}
				],
				todoCount:0,
				todoList:[],
				cid:plus.push.getClientInfo().clientid
			}
		},
		onLoad() {
			this.getUserInfo()			
		},
		onShow(){
			this.todolist()
		},
		created(){
		},
		methods:{
			handleGridClick (e) {
				switch (e){
					case 0:
						uni.navigateTo({
							url:'/pages/index/leave-records/leave-records'
						})
						break;
					case 1:
						uni.navigateTo({
							url:'/pages/index/repair/repair'
						})
						break;
					case 2:
						uni.navigateTo({
							url:'/pages/index/endorsement/endorsement'
						})
						break;
					case 3:
						uni.navigateTo({
							url:'/pages/index/contract/contract'
						})
						break;
					case 4:
						uni.navigateTo({
							url:'/pages/index/document/document'
						})
						break;
						case 5:
						uni.navigateTo({
							url:'/pages/index/overtime/overtime'
						})
						break;
					default:
						break;
				}
			},
			getUserInfo(){
				apiUserInfo().then(res=>{
					uni.setStorageSync('user_info',res.data.data)
				})
			},
			todolist(){
				apitodo({processType:""}).then(res=>{
					this.todoCount=res.data.length
					this.todoList=res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.grid{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20upx;
		background-color: $uni-bg-color;
		.grid-title {
			width: 100%;
			height: 80upx;
			padding: 0 24upx;
			font-size: 32upx;
			font-weight: bold;
			line-height: 80upx;
		}
	}
	.item{
		width: 100%;
		position: relative;
		display:flex;
		flex-wrap:wrap;
		&-card{
			width: 25%;
			line-height:2;
			text-align: center;
			font-size:26rpx;
			color:#666;
			padding: 20upx 0;
			&-top{
				padding: 0 50upx;
				height: 88upx;
			}
		}
	}
	.item-image{
		width:100%;
		height: 100%;
	}
</style>